<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/global.css" />
		<link rel="stylesheet" type="text/css" href="css/layout.css" />
		<script type="text/javascript">
			window.onload = function() {
				tab = document.getElementById("tab");
			}
			var x = 1;

			function xlList() {
				x++;
				if (x % 2 == 0) {
					document.getElementById("shopping_commend_arrow").src = "images/shopping_arrow_down.gif";
					document.getElementById("shopping_commend_sort").style.display = "none";
				} else {
					document.getElementById("shopping_commend_arrow").src = "images/shopping_arrow_up.gif";
					document.getElementById("shopping_commend_sort").style.display = "block";
				}
			}

			function delRow(t) {
				var rowindex = t.parentNode.parentNode.rowIndex
				tab.deleteRow(rowindex)
				sum();
				jieshengSum();
				jifen();
			}

			function jifen() {
				cc = 0;
				for (var i = 0; i < tab.rows.length; i++) {
					var danjifen = tab.rows[i].cells[1].innerHTML;
					var shuliang = tab.rows[i].cells[4].children[0].value;
					cc += danjifen * shuliang;
				}
				document.getElementById("jifen").innerHTML = cc;
			}

			function sum() {
				aa = 0;
				for (var i = 0; i < tab.rows.length; i++) {
					var xianjia = tab.rows[i].cells[3].children[0].innerHTML;
					var shuliang = tab.rows[i].cells[4].children[0].value
					aa += xianjia * shuliang
				}
				document.getElementById("sum").innerHTML = aa;
			}

			function jieshengSum() {
				bb = 0;
				for (var i = 0; i < tab.rows.length; i++) {
					var shichang = tab.rows[i].cells[2].children[0].innerHTML;
					var xianjia = tab.rows[i].cells[3].children[0].innerHTML;
					var shuliang = tab.rows[i].cells[4].children[0].value;
					bb += (shichang - xianjia) * shuliang;
				}
				document.getElementById("jieshengSum").innerHTML = bb;
			}

			function edit() {
				sum();
			}

			function huoQu(t) {
				var list1 = t.parentNode.parentNode.children[0];//ul 下的 第一个 li
				var list2 = t.parentNode.parentNode.children[1];//ul 下的 第二个li
				var list3 = t.parentNode.parentNode.children[2];//ul 下的 第三个li
				var jifenget = t.parentNode.parentNode.children[2].children[0];
				var newtr = tab.insertRow(tab.rows.length);
				newtr.setAttribute("class", "shopping_product_list");
				var td1 = newtr.insertCell(0);
				td1.innerHTML = "<a href='javascript:;'>" + list1.innerHTML + "</a>"
				td1.setAttribute("class", "shopping_product_list_1");
				var td2 = newtr.insertCell(1);
				td2.innerHTML = parseInt(jifenget.innerText)
				td2.setAttribute("class", "shopping_product_list_2")
				var td3 = newtr.insertCell(2);
				td3.innerHTML = list2.innerHTML;
				td3.setAttribute("class", "shopping_product_list_3")
				var td4 = newtr.insertCell(3);
				td4.innerHTML = list3.innerHTML;
				td4.setAttribute("class", "shopping_product_list_4")
				var td5 = newtr.insertCell(4);
				td5.innerHTML = "<input type='text' value='1' size='1' onblur='edit()'/>"
				td5.setAttribute("class", "shopping_product_list_5")
				var td6 = newtr.insertCell(5);
				td6.innerHTML = "<a href='javascript:;' class='blue' onclick='delRow(this)'>删除</a>"
				td6.setAttribute("class", "shopping_product_list_6")
				sum();
				jieshengSum();
				jifen();
			}
		</script>
	</head>

	<body>
		<div id="header"><iframe src="header.html" height="155px" width="960px" frameborder="0"></iframe></div>
		<!--中间部分开始-->
		<div id="main">
			<div>&nbsp;&nbsp;<img src="images/shopping_myshopping.gif" alt="shopping"> <a href="#">全场免运费活动中</a></div>
			<!--为您推荐商品开始-->
			<div class="shopping_commend">
				<div class="shopping_commend_left">根据您挑选的商品，当当为您推荐</div>
				<div class="shopping_commend_right"><img onclick="xlList()" src="images/shopping_arrow_up.gif" alt="shopping" id="shopping_commend_arrow"></div>
			</div>
			<div id="shopping_commend_sort">
				<div class="shopping_commend_sort_left">
					<ul>
						<li class="shopping_commend_list_1">·<a href="#" class="blue">JavaScript DOM编程艺术</a></li>
						<li class="shopping_commend_list_2">￥<span>39.00</span></li>
						<li class="shopping_commend_list_3">￥<span>29.30</span></li>
						<li class="shopping_commend_list_4"><a href="javascript:;" class="shopping_yellow" onclick="huoQu(this)">购买</a></li>
					</ul>
					<ul>
						<li class="shopping_commend_list_1">·<a href="#" class="blue">解禁（当当网独家首发）</a></li>
						<li class="shopping_commend_list_2">￥<span>28.00</span></li>
						<li class="shopping_commend_list_3">￥<span>19.40</span></li>
						<li class="shopping_commend_list_4"><a href="javascript:;" class="shopping_yellow" onclick="huoQu(this)">购买</a></li>
					</ul>
					<ul>
						<li class="shopping_commend_list_1">·<a href="#" class="blue">地王之王（金融危机下房地产行...</a></li>
						<li class="shopping_commend_list_2">￥<span>32.80</span></li>
						<li class="shopping_commend_list_3">￥<span>25.10</span></li>
						<li class="shopping_commend_list_4"><a href="javascript:;" class="shopping_yellow" onclick="huoQu(this)">购买</a></li>
					</ul>
					<ul>
						<li class="shopping_commend_list_1">·<a href="#" class="blue">逃庄</a></li>
						<li class="shopping_commend_list_2">￥<span>36.00</span></li>
						<li class="shopping_commend_list_3">￥<span>27.70</span></li>
						<li class="shopping_commend_list_4"><a href="javascript:;" class="shopping_yellow" onclick="huoQu(this)">购买</a></li>
					</ul>
				</div>
				<div class="shopping_commend_sort_mid"></div>
				<div class="shopping_commend_sort_left">
					<ul>
						<li class="shopping_commend_list_1">·<a href="#" class="blue">深入浅出MySQL数据库开发、优...</a></li>
						<li class="shopping_commend_list_2">￥<span>59.00</span></li>
						<li class="shopping_commend_list_3">￥<span>47.20</span></li>
						<li class="shopping_commend_list_4"><a href="javascript:;" class="shopping_yellow" onclick="huoQu(this)">购买</a></li>
					</ul>
					<ul>
						<li class="shopping_commend_list_1">·<a href="#" class="blue">大玩家（马未都、王刚推荐!央...</a></li>
						<li class="shopping_commend_list_2">￥<span>34.80</span></li>
						<li class="shopping_commend_list_3">￥<span>20.60</span></li>
						<li class="shopping_commend_list_4"><a href="javascript:;" class="shopping_yellow" onclick="huoQu(this)">购买</a></li>
					</ul>
					<ul>
						<li class="shopping_commend_list_1">·<a href="#" class="blue">都市风水师--官场风水小说：一...</a></li>
						<li class="shopping_commend_list_2">￥<span>39.80</span></li>
						<li class="shopping_commend_list_3">￥<span>30.50</span></li>
						<li class="shopping_commend_list_4"><a href="javascript:;" class="shopping_yellow" onclick="huoQu(this)">购买</a></li>
					</ul>
					<ul>
						<li class="shopping_commend_list_1">·<a href="#" class="blue">国戏（以麻将术语解读宦海沉浮...</a></li>
						<li class="shopping_commend_list_2">￥<span>25.00</span></li>
						<li class="shopping_commend_list_3">￥<span>17.30</span></li>
						<li class="shopping_commend_list_4"><a href="javascript:;" class="shopping_yellow" onclick="huoQu(this)">购买</a></li>
					</ul>
				</div>
			</div>

			<div class="shopping_list_top">您已选购以下商品</div>
			<div class="shopping_list_border">
				<table width="100%" border="0" cellspacing="0" cellpadding="0">
					<tr class="shopping_list_title">
						<td class="shopping_list_title_1">商品名</td>
						<td class="shopping_list_title_2">单品积分</td>
						<td class="shopping_list_title_3">市场价</td>
						<td class="shopping_list_title_4">当当价</td>
						<td class="shopping_list_title_5">数量</td>
						<td class="shopping_list_title_6">删除</td>
					</tr>
				</table>
				<table id="tab" width="100%" border="0" cellspacing="0" cellpadding="0">
					<tr class="shopping_product_list" id="shoppingProduct_01">
						<td class="shopping_product_list_1"><a href="#" class="blue">私募（首部披露资本博弈秘密的金融...</a></td>
						<td class="shopping_product_list_2">189</td>
						<td class="shopping_product_list_3">￥<span>32.00</span></td>
						<td class="shopping_product_list_4">￥<span>18.90</span> (59折)</td>
						<td class="shopping_product_list_5"><input type="text" value="1" onblur="edit()"></td>
						<td class="shopping_product_list_6"><a href="#" class="blue" onclick="delRow(this)">删除</a></td>
					</tr>
					<tr class="shopping_product_list" id="shoppingProduct_02">
						<td class="shopping_product_list_1"><a href="#" class="blue"> 小团圆（张爱玲最神秘小说遗稿）</a></td>
						<td class="shopping_product_list_2">173</td>
						<td class="shopping_product_list_3">￥<span>28.00</span></td>
						<td class="shopping_product_list_4">￥<span>17.30</span> (62折)</td>
						<td class="shopping_product_list_5"><input type="text" value="1" onblur="edit()"></td>
						<td class="shopping_product_list_6"><a href="#" class="blue" onclick="delRow(this)">删除</a></td>
					</tr>

					<tr class="shopping_product_list" id="shoppingProduct_03">
						<td class="shopping_product_list_1"><a href="#" class="blue">不抱怨的世界(畅销全球80国的世界...</a></td>
						<td class="shopping_product_list_2">154</td>
						<td class="shopping_product_list_3">￥<span>24.80</span></td>
						<td class="shopping_product_list_4">￥<span>15.40</span> (62折)</td>
						<td class="shopping_product_list_5"><input type="text" value="1" onblur="edit()"></td>
						<td class="shopping_product_list_6"><a href="#" class="blue" onclick="delRow(this)">删除</a></td>
					</tr>
					<tr class="shopping_product_list" id="shoppingProduct_04">
						<td class="shopping_product_list_1"><a href="#" class="blue">福玛特双桶洗衣机XPB20-07S</a></td>
						<td class="shopping_product_list_2">358</td>
						<td class="shopping_product_list_3">￥<span>458.00</span></td>
						<td class="shopping_product_list_4">￥<span>358.00</span> (78折)</td>
						<td class="shopping_product_list_5"><input type="text" value="2" onblur="edit()"></td>
						<td class="shopping_product_list_6"><a href="#" class="blue" onclick="delRow(this)">删除</a></td>
					</tr>
					<tr class="shopping_product_list" id="shoppingProduct_05">
						<td class="shopping_product_list_1"><a href="#" class="blue">PHP和MySQL Web开发 （原书第4版）</a></td>
						<td class="shopping_product_list_2">712</td>
						<td class="shopping_product_list_3">￥<span>95.00</span></td>
						<td class="shopping_product_list_4">￥<span>71.20</span> (75折)</td>
						<td class="shopping_product_list_5"><input type="text" value="1" onblur="edit()"></td>
						<td class="shopping_product_list_6"><a href="#" class="blue" onclick="delRow(this)">删除</a></td>
					</tr>
					<tr class="shopping_product_list" id="shoppingProduct_06">
						<td class="shopping_product_list_1"><a href="#" class="blue">法布尔昆虫记</a>（再买￥68.30即可参加“满199元减10元现金”活动）</td>
						<td class="shopping_product_list_2">10</td>
						<td class="shopping_product_list_3">￥<span>198.00</span></td>
						<td class="shopping_product_list_4">￥<span>130.70</span> (66折)</td>
						<td class="shopping_product_list_5"><input type="text" value="1" onblur="edit()"></td>
						<td class="shopping_product_list_6"><a href="#" class="blue" onclick="delRow(this)">删除</a></td>
					</tr>
				</table>
				<div class="shopping_list_end">
					<ul>
						<li class="shopping_list_end_1"><input name="" type="image" src="images/shopping_balance.gif"></li>
						<li class="shopping_list_end_2">￥<span id="sum">969.5</span></li>
						<li class="shopping_list_end_3">商品金额总计：</li>
						<li class="shopping_list_end_4">您共节省：<label class="shopping_list_end_yellow">￥<span id="jieshengSum">324.30</span></label><br/> 可获商品积分：
							<label class="shopping_list_end_yellow"><span id="jifen">1954</span></label>
						</li>
					</ul>
				</div>
			</div>

		</div>

		<!--网站版权部分开始-->
		<div id="footer">
			<iframe src="footer.html" height="50px" width="900px" frameborder="0"></iframe></div>
	</body>

</html>